"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
import { ArrowLeft, Users, Package, Handshake, ShoppingCart, LayoutDashboard, Settings } from "lucide-react";

const adminRoutes = [
  {
    label: "控制台",
    href: "/admin",
    icon: LayoutDashboard,
  },
  {
    label: "会员管理",
    href: "/admin/members",
    icon: Users,
  },
  {
    label: "产品管理",
    href: "/admin/products",
    icon: Package,
  },
  {
    label: "项目管理",
    href: "/admin/projects",
    icon: Handshake,
  },
  {
    label: "供需管理",
    href: "/admin/marketplace",
    icon: ShoppingCart,
  },
  {
    label: "系统设置",
    href: "/admin/settings",
    icon: Settings,
  },
];

export default function AdminLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const pathname = usePathname();

  return (
    <div className="flex min-h-screen bg-muted/20">
      {/* 侧边栏 */}
      <div className="hidden md:flex flex-col w-64 bg-background border-r p-6">
        <div className="flex items-center gap-2 mb-8">
          <h1 className="text-xl font-bold">管理后台</h1>
        </div>
        <nav className="space-y-1 flex-1">
          {adminRoutes.map((route) => (
            <Link
              key={route.href}
              href={route.href}
              className={cn(
                "flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors",
                pathname === route.href
                  ? "bg-primary text-primary-foreground"
                  : "hover:bg-muted"
              )}
            >
              <route.icon className="h-4 w-4" />
              {route.label}
            </Link>
          ))}
        </nav>
        <Separator className="my-4" />
        <Button variant="outline" asChild className="gap-2">
          <Link href="/">
            <ArrowLeft className="h-4 w-4" /> 返回前台
          </Link>
        </Button>
      </div>

      {/* 主内容区 */}
      <div className="flex-1 flex flex-col">
        <header className="h-14 border-b bg-background flex items-center px-6 sticky top-0 z-10">
          <div className="md:hidden mr-4">
            <Button variant="ghost" size="icon" asChild>
              <Link href="/">
                <ArrowLeft className="h-5 w-5" />
              </Link>
            </Button>
          </div>
          <h2 className="text-lg font-semibold">管理后台</h2>
        </header>
        <main className="flex-1 p-6 overflow-auto">{children}</main>
      </div>
    </div>
  );
}